import { Outlet } from 'react-router-dom';
import { Box } from '@mui/material';
import Navbar from './components/Navbar';
import Assistant from './components/Assistant';
import { AuthProvider } from './features/auth/AuthContext';
import { FriendsProvider } from './features/friends/FriendsContext';
import { DownloadProvider } from './features/resources/DownloadContext';
import { CommunityProvider } from './features/community/CommunityContext';
import { MessagesProvider } from './features/messages/MessagesContext';
import { ResourceProvider } from './features/resources/ResourceContext';
import './App.css';

function App() {
  return (
    <AuthProvider>
      <FriendsProvider>
        <DownloadProvider>
          <CommunityProvider>
            <MessagesProvider>
              <ResourceProvider>
                <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', width: '100%', maxWidth: '100%', margin: 0, padding: 0 }}>
                  <Navbar />
                  <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', width: '100%', maxWidth: '100%', margin: 0, padding: 0 }}>
                    <Outlet />
                  </Box>
                  <Assistant />
                </Box>
              </ResourceProvider>
            </MessagesProvider>
          </CommunityProvider>
        </DownloadProvider>
      </FriendsProvider>
    </AuthProvider>
  )
}

export default App
